<template>
	<view>
		<view v-if="set.type == 'category'" >
			<view class="nav" v-if="set.column.length != 0" >
		
				<template v-if="set.style&&set.style>1">
					<u-subsection :list="tabs" :bgColor="set.bg_color" 
					:activeColor="set.color" :mode="getMod(set.style)" :current="cur" @change="tabsClick"></u-subsection>
				</template>
				<u-tabs :list="tabs" :lineColor="set.color"  lineWidth="40" v-else @click="tabsClick"></u-tabs>
				
			</view> 
			<view class="mags container">
				<view >
				<view v-for="(item, index) in data" :key="index" @click="content(item.id, item)">

					<!-- 无图集，无视频，无缩略图 ===>展示文字 -->
					<view class="msg showText" v-if="item.img_list.length == 0&&!item.vedio&&!item.img">
						<view class="text">
							<view class="top">{{item.title}}</view>
							
							<view class="bottom">
								<view class="time" v-if="set.show_time&&set.show_time==1">发布时间：{{$u.timeFrom(transitionTime(item.time), 'yyyy年mm月dd日')}}</view>
								<view class="pageviews" v-if="set.show_view&&set.show_view==1">
									<u-icon name="eye-fill" color="#b4b4b4" size="12"></u-icon> {{item.view}}
								</view>
							</view>
						</view>
					</view>

					<!-- 无图集，无视频，有缩略图 ===>展示缩略图 -->
					<view class="msg" v-if="item.img_list.length <= 1&&!item.vedio&&item.img"
					:style="set.img_position&&set.img_position=='right'?'flex-direction: row-reverse;':''">
						<view class="left" >
							<view class="top" style="margin-bottom: 5px;">{{item.title}}</view>
								<view class="u-line-2"v-if="set.show_desc&&set.show_desc==1" :style="'font-size: 12px;color: '+set.desc_color">{{item.desc}}</view>
								<view class="bottom">
									<view class="time" v-if="set.show_time&&set.show_time==1">发布时间：{{$u.timeFrom(transitionTime(item.time), 'yyyy年mm月dd日')}}</view>
									<view class="pageviews" v-if="set.show_view&&set.show_view==1">
										<u-icon name="eye-fill" color="#b4b4b4" size="12"></u-icon> {{item.view}}
									</view>
								</view>
						
						</view>
						<view class="right">
							<img style="width: 100%;height: 100%;object-fit: cover;" mode="aspectFill" :src="item.img">
						</view>
					</view>

					<!-- 有图集，有/无视频，有/无缩略图 ===>展示图集 -->
					<view class="showImgs" v-if="item.img_list.length > 1">
						<view class="showImg">
							<view class="top">{{item.title}}</view>
							<view class="middle" v-if="item.img_list.length == 2">
							
								<view
									style="width: 48%;height: 80px;border: 1px solid #f6f6f6;border-radius: 6px;
									overflow: hidden;"
									v-for="(val, i) in item.img_list">
									<img style="width: 100%;height: 100%;object-fit: cover;" mode="aspectFill" :src="val">
								</view>
							</view>
							<view class="middle" v-if="item.img_list.length > 2">
								<view
									style="width: 30%;height: 80px;border: 1px solid #f6f6f6;border-radius: 6px;
									overflow: hidden;"
									v-for="(val, i) in item.img_list.slice(0, 3)">
									<img style="width: 100%;height: 100%;object-fit: cover;" mode="aspectFill" :src="val">
								</view>
							</view>
							<view class="bottom">
								<view class="time" v-if="set.show_time&&set.show_time==1">发布时间：{{$u.timeFrom(transitionTime(item.time), 'yyyy年mm月dd日')}}</view>
								<view class="pageviews" v-if="set.show_view&&set.show_view==1">
									<u-icon name="eye-fill" color="#b4b4b4" size="12"></u-icon> {{item.view}}
								</view>
							</view>
						</view>
					</view>

					<!-- 无图集，有视频，有/无缩略图 ===>展示视频 -->
					<view class="showVid" v-if="item.img_list.length <= 1&&item.vedio">
						<view class="vid">
							<view class="top">{{item.title}}</view>
							<view class="middle" @click.stop="">
								<moxi-video width="100%" height="300px" 
								:src="item.vedio" 
								:poster="item.vedio_img"></moxi-video>
								<!-- <video style="width: 100%;max-height: 300px;"  :src="item.vedio"
									:poster="item.vedio_img"></video> -->
							</view>
							<view class="bottom">
								<view class="time" v-if="set.show_time&&set.show_time==1">发布时间：{{$u.timeFrom(transitionTime(item.time), 'yyyy年mm月dd日')}}</view>
								<view class="pageviews" v-if="set.show_view&&set.show_view==1">
									<u-icon name="eye-fill" color="#b4b4b4" size="12"></u-icon> {{item.view}}
								</view>
							</view>
						</view>
					</view>

				</view>
				<u-empty v-if="!hasMore" text="没有更多内容..." iconSize="0"></u-empty>
				</view>
			</view>
		</view>
		<view v-if="set.type == 'content'">
			<view class="mags container">
				<view >
				<view v-for="(item, index) in data" :key="index" @click="content(item.id, item)">
			
					<!-- 无图集，无视频，无缩略图 ===>展示文字 -->
					<view class="msg showText" v-if="item.img_list.length == 0&&!item.vedio&&!item.img">
						<view class="text">
							<view class="top">{{item.title}}</view>
							<view class="bottom">
								<view class="time" v-if="set.show_time&&set.show_time==1">发布时间：{{$u.timeFrom(transitionTime(item.time), 'yyyy年mm月dd日')}}</view>
								<view class="pageviews" v-if="set.show_view&&set.show_view==1">
									<u-icon name="eye-fill" color="#b4b4b4" size="12"></u-icon> {{item.view}}
								</view>
							</view>
						</view>
					</view>
			
					<!-- 无图集，无视频，有缩略图 ===>展示缩略图 -->
					<view class="msg" v-if="item.img_list.length <= 1&&!item.vedio&&item.img" :style="set.img_position&&set.img_position=='right'?'flex-direction: row-reverse;':''">
						<view class="left">
							<view class="top">{{item.title}}</view>
								<view class="u-line-2"v-if="set.show_desc&&set.show_desc==1" :style="'font-size: 12px;color: '+set.desc_color">{{item.desc}}</view>
							<view class="bottom">
								<view class="time" v-if="set.show_time&&set.show_time==1">发布时间：{{$u.timeFrom(transitionTime(item.time), 'yyyy年mm月dd日')}}</view>
								<view class="pageviews" v-if="set.show_view&&set.show_view==1">
									<u-icon name="eye-fill" color="#b4b4b4" size="12"></u-icon> {{item.view}}
								</view>
							</view>
						</view>
						<view class="right">
							<img style="width: 100%;height: 100%;object-fit: cover;" mode="aspectFill" :src="item.img">
						</view>
					</view>
			
					<!-- 有图集，有/无视频，有/无缩略图 ===>展示图集 -->
					<view class="showImgs" v-if="item.img_list.length > 1">
						<view class="showImg">
							<view class="top">{{item.title}}</view>
							<view class="middle" v-if="item.img_list.length == 2">
								<view
									style="width: 48%;height: 80px;border: 1px solid #f6f6f6;border-radius: 6px;
									overflow: hidden;"
									v-for="(val, i) in item.img_list">
									<img style="width: 100%;height: 100%;object-fit: cover;" mode="aspectFill" :src="val">
								</view>
							</view>
							<view class="middle" v-if="item.img_list.length > 3">
								<view
									style="width: 30%;height: 80px;border: 1px solid #f6f6f6;border-radius: 6px;
									overflow: hidden;"
									v-for="(val, i) in item.img_list.slice(0, 3)">
									<img style="width: 100%;height: 100%;object-fit: cover;" mode="aspectFill" :src="val">
								</view>
							</view>
							<view class="bottom">
								<view class="time" v-if="set.show_time&&set.show_time==1">发布时间：{{$u.timeFrom(transitionTime(item.time), 'yyyy年mm月dd日')}}</view>
								<view class="pageviews" v-if="set.show_view&&set.show_view==1">
									<u-icon name="eye-fill" color="#b4b4b4" size="12"></u-icon> {{item.view}}
								</view>
							</view>
						</view>
					</view>
			
					<!-- 无图集，有视频，有/无缩略图 ===>展示视频 -->
					<view class="showVid" v-if="item.img_list.length <= 1&&item.vedio">
						<view class="vid">
							<view class="top">{{item.title}}</view>
							<view class="middle">
								<video style="width: 100%;max-height: 300px;" :src="item.vedio"
									:poster="item.vedio_img"></video>
							</view>
							<view class="bottom">
								<view class="time" v-if="set.show_time&&set.show_time==1">发布时间：{{$u.timeFrom(transitionTime(item.time), 'yyyy年mm月dd日')}}</view>
								<view class="pageviews" v-if="set.show_view&&set.show_view==1">
									<u-icon name="eye-fill" color="#b4b4b4" size="12"></u-icon> {{item.view}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="!hasMore&&set.tip.length" text="没有更多内容..." iconSize="0"></u-empty>
				</view>
			</view>
		</view>
		<view style="margin-top: 5px;" v-if="hasMore">
			<u-button @click="scrolltolower" style="color: #333;" >
		查看更多...</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "diy-articles",
		data() {
			return {
				hasMore: true,
				tabs: [],
				info: {
					column: [],
					content: [],
					page: 1,
					page_num: 10,
					top_column_id: 0,
					search: "",
					order_type:""
				},
				data: [],
				cur:0
			};
		},
		props: {
			set: {
				type: Object,
				default () {
					return {
						type: '',
						column: '',
						color: '',
						content: '',
						tip:'',
						search:"",
						show_view:1
					}
				}
			}
		},created() {
			this.info.order_type = this.set.order_type;
			this.info.search = this.set.search;
			this.info.top_column_id = this.set.column[0]
			this.get();
		},mounted() {
			
		},methods: {
			getMod(t){
				if(t==3){
					return 'subsection';
				}else{
					return 'button'
				}
			},
			scrolltolower(){
				if(this.hasMore){
					this.info.page++;
					this.get();
				}
			},
			transitionTime(time) {
				let dateObj = new Date(time)
				let timestamp = Date.parse(dateObj)
				return timestamp
			},
			content(id, data) {
				this.navto('pages/index/content?id=' + id)
			},
			tabsClick(e) {
				if(this.set.style&&this.set.style>1){
					this.info.top_column_id = this.tabs[e].value;
					this.cur = e;
				}else{
					this.info.top_column_id = e.value;
				}
				this.data = [];
				this.info.page = 1;
				this.hasMore = true;
				this.get(1);
			},
			get: function(page) {
				if (!this.hasMore) {
					return false;
				}
				if (page) {
					this.info.page = page;
				}
				let self = this;
				if(this.set.type == 'category') {
					this.info.column = this.set.column
					this.info.content = []
				} else {
					this.info.column = []
					this.info.content = this.set.content
				}
				this.moxiPost("/index/app/get_content_list", this.info, function(data) {
					if (data.data.allpage <= self.info.page) {
						self.hasMore = false;
					}
					if (!self.tabs.length) {
						if (data.data.column && data.data.column.length) {
							self.tabs = data.data.column;
						}
					}
					if (data.data.data) {
						for (let k in data.data.data) {
							data.data.data[k].time = uni.$u.timeFormat(data.data.data[k].time, 'yyyy-mm-dd');
							self.data.push(data.data.data[k])
						}
					}
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 98%;
		margin: 0 auto;
	}

	.showVid {
		margin-top: 16px;
		padding-bottom: 16px;
		border-bottom: 1px dashed #eee;

		.vid {
			display: flex;
			flex-direction: column;

			.middle {
				z-index: 0;
				display: flex;
				justify-content: space-between;
				margin: 10px 0;
				border-radius: 6px;
				overflow: hidden;

				uni-video {
					width: 100%;
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;

				.topStandard {
					padding: 2px 6px;
					border-radius: 12px;
					background-color: #f00;
					color: #fff;
				}

				.pageviews {
					display: flex;
					align-items: baseline;
					color: #b4b4b4;

					.u-icon {
						margin-right: 6px;
					}
				}

				.time {
					color: #b4b4b4;
				}
			}
		}
	}

	.showImgs {
		margin-top: 16px;
		padding-bottom: 16px;
		border-bottom: 1px dashed #eee;

		.showImg {
			display: flex;
			flex-direction: column;

			.middle {
				display: flex;
				justify-content: space-between;
				margin: 10px 0;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;

				.topStandard {
					padding: 2px 6px;
					border-radius: 12px;
					background-color: #f00;
					color: #fff;
				}

				.pageviews {
					display: flex;
					align-items: baseline;
					color: #b4b4b4;

					.u-icon {
						margin-right: 6px;
					}
				}

				.time {
					color: #b4b4b4;
				}
			}
		}
	}

	.showText {
		.text {
			width: 100%;

			.top {
				font-size: 16px;
				// font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				font-size: 12px;

				.topStandard {
					padding: 2px 6px;
					border-radius: 12px;
					background-color: #f00;
					color: #fff;
				}

				.pageviews {
					display: flex;
					align-items: baseline;
					color: #b4b4b4;

					.u-icon {
						margin-right: 6px;
					}
				}

				.time {
					color: #b4b4b4;
				}
			}
		}
	}

	.msg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16px;
		padding-bottom: 16px;
		border-bottom: 1px dashed #eee;

		.left {
	
			width: calc(100% - 100px);
			min-height: 80px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// padding-right: 20px;

			.top {
				font-size: 16px;
				// font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				font-size: 12px;

				.topStandard {
					padding: 2px 6px;
					border-radius: 12px;
					background-color: #f00;
					color: #fff;
				}

				.pageviews {
					display: flex;
					align-items: baseline;
					color: #b4b4b4;

					.u-icon {
						margin-right: 6px;
					}
				}

				.time {
					color: #b4b4b4;
				}
			}
		}

		.right {
			width: 80px;
			height: 80px;
			border-radius: 6px;
			background-color: #87ceeb;
			overflow: hidden;
		
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
</style>